<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.test{
			width: 200px;
			height: 200px;
			background: #000;
			position: relative;
			-webkit-animation: test 3s linear;
			/*animation-name: test;
			animation-duration: 3s;
			animation-timing-function: 速度
				ease 默认
				linear 均速
				ease-in 以低速开始
				ease-out 以低速结束
				ease-in-out 以低速开始和结束;
			animation-delay: 3s;	几秒后开始
			animation-iteration-count: 3;	播放的次数
			animation-direction: 是否反向播放
				initial 默认
				inherit 从父元素继承
				normal 正常播放
				reverse 反向播放
				alternate 奇数正向播放
				alternate-reverse 奇数反向播放;
			animation-play-state: paused|running; 暂停|正在运行的动画;*/
		}
		@-webkit-keyframes test{
			0%   {background:red; left:0px; top:0px;}
			25%  {background:yellow; left:200px; top:0px;}
			50%  {background:blue; left:200px; top:200px;}
			75%  {background:green; left:0px; top:200px;}
			100% {background:red; left:0px; top:0px;}
		}
	</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>